<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>采购基本信息</span>
                <div style="float: right;">
                    <el-button size="small" @click="onClose">取 消</el-button>
                </div>
            </div>
            <table class="custom-table">
                <table class="custom-table">
                    <tr><td class="tr-title">项目名称</td><td>{{this.row.name}}</td></tr>
                    <tr><td class="tr-title">预计进场时间</td><td>{{this.row.startTime | formatLen}}</td></tr>
                    <tr><td class="tr-title">预算控制成本</td><td>{{this.row.budget}}</td></tr>
                    <tr><td class="tr-title">合同款项支付方式</td><td> {{this.row.payType}}</td></tr>
                    <tr><td class="tr-title">招标内容</td><td> {{this.row.bidContent}}</td></tr>
                    <tr><td class="tr-title">承包范围</td><td> {{this.row.contractingScope}}</td></tr>
                    <tr><td class="tr-title">合同形式</td><td> {{this.row.contractForm}}</td></tr>
                    <tr><td class="tr-title">施工资质</td><td> {{this.row.qualification}}</td></tr>
                    <tr><td class="tr-title">施工方案文件</td><td><el-button type="text" @click="preview">预览</el-button></td></tr>
                </table>
            </table>
          </el-card>

          <!---原驳回物资-->
         <el-card class="box-card" shadow="hover" v-if="historyTableData.length >=1">
            <div slot="header" class="clearfix">
              <span>原驳回劳务</span>
            </div>
            <!-- 物资分类 和 物资列表 -->
            <el-table :data="historyTableData" style="width: 100%;" stripe>
                <el-table-column prop="labourName" label="劳务分类名称" width="200"></el-table-column>
                <el-table-column prop="applyNum" label="申请数量" width="140"></el-table-column>
                <el-table-column prop="estimatePrice" label="预估价" width="140"></el-table-column>
                <el-table-column prop="purchaseType" label="采购方式" width="150">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.purchaseType === '2'">邀请采购</el-tag>
                        <el-tag v-if="scope.row.purchaseType === '3'">公开采购</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注">
                    <template slot-scope="scope">
                        <el-popover
                            placement="top"
                            width="200"
                            trigger="click"
                            :content="scope.row.remarks">
                            <el-button type="text" slot="reference">{{scope.row.remarks | ellipsis}}</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="reason" label="驳回理由">
                    <template slot-scope="scope">
                        <el-popover
                            placement="top"
                            width="200"
                            trigger="click"
                            :content="scope.row.reason">
                            <el-button type="text" slot="reference">{{scope.row.reason | ellipsis}}</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>劳务信息</span>
            </div>
            <table class="custom-table" style="margin-bottom:10px;">
                <tr v-for="(item,index) in material.materialInfo" :key="item.id">
                    <td class="tr-title">分类名称</td><td> {{item.labourName}}</td>
                    <td class="tr-title">分类合计预估价</td><td> {{item.priceTotal}}</td>
                    <td v-if="index===0" :rowspan="material.materialInfo.length">预估总合计：{{totalSumAll}}</td>
                </tr>
            </table>
            <el-table :data="material.tableData" style="width: 100%;" ref="table2" stripe>
                <el-table-column prop="labourName" label="劳务分类名称" width="120"></el-table-column>
                <el-table-column prop="applyNum" label="申请数量" width="140"></el-table-column>
                <el-table-column prop="estimatePrice" label="预估价" width="140"></el-table-column>
                <el-table-column prop="purchaseType" label="采购方式" width="150">
                    <template slot-scope="scope">
                        <template v-if="scope.row.purchaseType === '2'">
                            邀请采购
                        </template>
                        <template v-else-if="scope.row.purchaseType === '3'">
                            公开采购
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
                <el-table-column prop="rejectFlag" label="状态" width="80" fixed="right">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.rejectFlag === '0'">未驳回</el-tag>
                        <el-tag v-if="scope.row.rejectFlag === '1'" type="warning">已驳回</el-tag>
                    </template>
                </el-table-column>
            </el-table>
          </el-card>

          <!-- 如果只有主管以上级别才可以看 这个需要待定 v-if="this.row.jobStateId > 2"-->
          <el-card class="box-card" shadow="hover" >
            <div slot="header" class="clearfix">
              <span>审批明细</span>
            </div>
            <el-table :data="node.tableData" style="width: 100%;" ref="table3" stripe>
                <el-table-column prop="updateUserName" label="办理人" width="120"></el-table-column>
                <el-table-column prop="stepName" label="办理步骤" width="180"></el-table-column>
                <el-table-column prop="updateTime" label="办理时间" width="180" :formatter="formatDate"></el-table-column>
                <el-table-column prop="changeInfo" label="办理意见"></el-table-column>
            </el-table>
          </el-card>
  
    </div>
</template>

<script>
    import moment from 'moment'
    import { 
        getLabourPlanReject,
        labourPlanApplyLog
    } from "@/api/labour_purchase_api"
    export default {
        props: ['row'],
        data() {
            return {
                material:{
                    tableData:[],
                    materialInfo:[]
                },
                historyTableData:[],//驳回列表
                node:{
                    tableData:[]
                }
            };
        },
        filters: {
            formatLen(value) {
                if (!value) {
                    return ''
                }
                return moment(value).format("YYYY-MM-DD")
            },
            ellipsis (value) {
                if (!value) return ''
                if (value.length > 12) {
                    return value.slice(0,12) + '...'
                }
                return value
            }
        },
        computed: {
            totalSumAll(){//物资分类评估价合计
                let totalSumAll = 0;
                this.material.materialInfo.map((item) => {
                    totalSumAll += parseFloat(item.priceTotal)
                })

                if((totalSumAll+'').indexOf(".") !== -1){
                   let str = totalSumAll.toString().split('.');
                   totalSumAll = str[1].length === 1 ? totalSumAll.toFixed(1) : totalSumAll.toFixed(2);
                }
                return totalSumAll;
            }
        },
        mounted(){
            this.getPurchaseDetails(this.row.id);
            /* if(this.row.jobStateId === 3 || this.row.jobStateId === 4 || this.row.jobStateId === 5){
                this.getPurchaseLog(this.row.id);
            } */
            this.getPurchaseLog(this.row.id);
        },
        methods: {     
            formatDate(row, column) {
                const date = row[column.property]
                if (date == undefined) {
                return ''
                }
                return moment(date).format("YYYY-MM-DD  HH:mm:ss")
            },
            //预览
            preview(row){
                if(!this.row.files){return;}
                var url = `${process.env.VUE_APP_FILE}${this.row.files}`;
                var form = document.createElement('form');
                form.action = url;
                form.target = '_blank';
                form.method = 'get';
                document.body.appendChild(form);
                form.submit();
            },
             //获取批量明细
             async getPurchaseLog(id){
                const {code,data} = await labourPlanApplyLog(id);
                if(code === 200){
                    this.node.tableData = data;
                }
            },
            //查询物资
            async getPurchaseDetails(id){
                const {code,data} = await getLabourPlanReject(id);
                if(code === 200){
                    //评估价进行转换 整数/100
                    data.forEach(v=>{
                        v.estimatePrice = (v.estimatePrice/100)
                    })

                    this.historyTableData = data.filter(v=>{return v.rejectFlag==='1'});//只渲染已驳回的数据 

                    this.material.tableData = data;

                    let countMap = {};
                    this.material.tableData.forEach(item=>{
                        if(!countMap[item.labourName] && item.rejectFlag === '0'){
                            countMap[item.labourName] = {
                                priceTotal:0,
                                labourName:item.labourName
                            }
                        }
                        //两个值都有 并且未驳回  主要考虑多个劳务下面相同分类 出现累加的情况 所以要加一个未驳回的判断
                        if(item.applyNum !== undefined && item.estimatePrice !== undefined && item.rejectFlag === '0'){
                            let price = item.estimatePrice * item.applyNum;
                            let prices = parseFloat(countMap[item.labourName].priceTotal) + parseFloat(price);
                            if((prices+'').indexOf(".") !== -1){
                                let str = prices.toString().split('.');
                                countMap[item.labourName].priceTotal = str[1].length === 1 ? prices.toFixed(1) : prices.toFixed(2);
                            }else{
                                countMap[item.labourName].priceTotal = prices
                            }
                        }
                        let materialInfo = [];
                        for(var p in countMap){
                            materialInfo.push(countMap[p]);
                        }
                        this.material.materialInfo = materialInfo;
                        
                    })
                }
            },       
            onClose() {
                this.$emit("on-cancel-click","detailsVerify");
            }
        }
    };
    </script>
    
    